<template>
  <div class="news-manager-container">
    <!-- 搜索框 -->
    <div class="search-container">
      <input v-model="searchKeywords" @input="searchNews" placeholder="请输入关键字搜索..." class="search-input" />
    </div>

    <!-- 新闻列表 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="标题" prop="title"></el-table-column>
      <el-table-column label="内容" prop="content"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        :current-page="pageRequest.pageNum"
        :page-size="pageRequest.pageSize"
        :total="total"
        :page-sizes="pageSizeArr"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSizeArr: [10, 20, 30, 40], // 每页显示条数的选项
      tableData: [], // 用于存放新闻数据
      pageRequest: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 每页显示数量
        q: {} // 搜索条件
      },
      total: 0, // 数据总数
      searchKeywords: '', // 搜索框中的关键字
    };
  },
  mounted() {
    this.load(); // 组件加载时调用数据加载方法
  },
  methods: {
    // 加载数据
    load() {
      // 这里假设request是已经定义好的用于请求数据的对象，需根据实际情况调整
      this.request.post("/news/all", {
        params: this.pageRequest // 通过 URL 参数传递分页请求参数
      }).then(res => {
        if (res.code === '200') {
          this.tableData = res.data.list; // 数据列表
          this.total = res.data.total; // 数据总数
        }
      });
    },

    // 搜索新闻
    searchNews() {
      this.pageRequest.q.keywords = this.searchKeywords; // 设置搜索关键词
      this.load(); // 加载数据
    },

    // 每页显示条数变化
    handleSizeChange(size) {
      this.pageRequest.pageSize = size;
      this.load();
    },

    // 当前页变化
    handleCurrentChange(pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.load();
    }
  }
};
</script>

<style scoped>
.news-manager-container {
  padding: 20px;
}

.search-container {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
  padding: 5px;
}

.news-table {
  margin-bottom: 20px;
}
</style>